<template>
  <div class="mod-dishes__food">
    <div class="top-search">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" label-position="top">
        <div class="top-search_form">
          <div class="top-search_form_input">
            <el-form-item :label="$t('food.name')">
              <el-input v-model="state.dataForm.name" :placeholder="$t('food.name')" clearable></el-input>
            </el-form-item>
          </div>
          <div class="top-search_form_btn">
            <el-form-item>
              <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-if="state.hasPermission('dishes:food:save')" type="primary" @click="addOrUpdateHandle()">{{
                $t("add") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-if="state.hasPermission('dishes:food:delete')" type="danger" @click="state.deleteHandle()">{{
                $t("deleteBatch") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="info" @click="state.exportHandle()">{{
                $t("import")
              }}</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div class="content">
      <el-table v-loading="state.dataListLoading" :data="state.dataList" row-key="id" border style="width: 100%">
        <el-table-column prop="id" :label="$t('food.id')" header-align="center" align="center" width="90"
          fixed></el-table-column>
        <el-table-column prop="name" :label="$t('food.name')" header-align="center" align="center" width="150"
          fixed></el-table-column>
          <el-table-column prop="code" :label="$t('food.code')" header-align="center" align="center" width="150"
          fixed></el-table-column>
        <el-table-column prop="category" :label="$t('food.category')" header-align="center" align="center"
          width="120"></el-table-column>
       
        <el-table-column prop="edible" :label="$t('food.edible')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="water" :label="$t('food.water')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="energy" :label="$t('food.energy')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="protein" :label="$t('food.protein')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="fat" :label="$t('food.fat')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="cholesterol" :label="$t('food.cholesterol')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="ash" :label="$t('food.ash')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="CHO" :label="$t('food.CHO')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="dietary_fiber" :label="$t('food.dietary_fiber')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="carotene" :label="$t('food.carotene')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="vitaminA" :label="$t('food.vitaminA')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="a_TE" :label="$t('food.a_TE')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="thiamin" :label="$t('food.thiamin')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="riboflavin" :label="$t('food.riboflavin')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="niacin" :label="$t('food.niacin')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="vitaminC" :label="$t('food.vitaminC')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Ca" :label="$t('food.Ca')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="P" :label="$t('food.P')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="K" :label="$t('food.K')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Na" :label="$t('food.Na')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Mg" :label="$t('food.Mg')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Fe" :label="$t('food.Fe')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Zn" :label="$t('food.Zn')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Se" :label="$t('food.Se')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Cu" :label="$t('food.Cu')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="Mn" :label="$t('food.Mn')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="I" :label="$t('food.I')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="SFA" :label="$t('food.SFA')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="MUFA" :label="$t('food.MUFA')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="PUFA" :label="$t('food.PUFA')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column prop="total" :label="$t('food.total')" header-align="center" align="center"
          width="120"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template v-slot="scope">
            <el-button v-if="state.hasPermission('sys:dept:update')" type="primary" link
              @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
            <el-button v-if="state.hasPermission('sys:dept:delete')" type="primary" link
              @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>




    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle">
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./food-add-or-update.vue";
import useView from "@/hooks/useView";

const view = reactive({
  getDataListURL: "/edu/diet/ingredient/Info/page",
  deleteURL: "/edu/diet/ingredient/Info/delete",
  getDataListIsPage: true,
  dataForm: {
    name: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};
</script>